<template>
  <div>
    <div class="table-operations">
      <a-button @click="setAgeSort">
        Sort age
      </a-button>
      <a-button @click="clearFilters">
        Clear filters
      </a-button>
      <a-button @click="clearAll">
        Clear filters and sorters
      </a-button>
      <!-- 下拉菜单选择显示的列 -->
      <a-select
          mode="multiple"
          style="width: 200px; margin-left: 16px;"
          placeholder="Select columns to display"
          v-model="selectedColumns"
      >
        <a-select-option v-for="column in allColumns" :key="column.key" :value="column.key">
          {{ column.title }}
        </a-select-option>
      </a-select>
    </div>
    <a-table
        :columns="filteredColumns"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleChange"
    />
  </div>
</template>

<script>
const allColumns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    filters: [
      { text: 'Joe', value: 'Joe' },
      { text: 'Jim', value: 'Jim' },
    ],
    filteredValue: null,
    onFilter: (value, record) => record.name.includes(value),
    sorter: (a, b) => a.name.localeCompare(b.name),
    sortOrder: null,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    sorter: (a, b) => a.age - b.age,
    sortOrder: null,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    filters: [
      { text: 'London', value: 'London' },
      { text: 'New York', value: 'New York' },
    ],
    filteredValue: null,
    onFilter: (value, record) => record.address.includes(value),
    sorter: (a, b) => a.address.localeCompare(b.address),
    sortOrder: null,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      filteredInfo: {},
      sortedInfo: {},
      allColumns, // 所有列的定义
      selectedColumns: ['name', 'age', 'address'], // 默认显示的列
      pagination: {
        current: 1,
        pageSize: 10,
      },
      loading: false,
    };
  },
  computed: {
    filteredColumns() {
      return this.allColumns.filter(column => this.selectedColumns.includes(column.key));
    },
  },
  methods: {
    handleChange(pagination, filters, sorter) {
      this.pagination = pagination;
      this.filteredInfo = filters;
      this.sortedInfo = sorter;
    },
    clearFilters() {
      this.filteredInfo = {};
      this.filteredColumns.forEach(column => {
        column.filteredValue = null;
      });
    },
    clearAll() {
      this.clearFilters();
      this.sortedInfo = {};
      this.filteredColumns.forEach(column => {
        column.sortOrder = null;
      });
    },
    setAgeSort() {
      this.sortedInfo = {
        order: 'descend',
        columnKey: 'age',
      };
      this.filteredColumns.forEach(column => {
        if (column.key === 'age') {
          column.sortOrder = 'descend';
        } else {
          column.sortOrder = null;
        }
      });
    },
  },
};
</script>

<style scoped>
.table-operations {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.table-operations > button,
.table-operations > .ant-select {
  margin-right: 8px;
}
</style>
